@import './basic.scss';
.icon-box {
  background-color: #fff;
  box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08), 0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
  border-radius: 30rpx;
  width: 134rpx;
  height: 56rpx;
  margin-left: 8rpx;
  border: 1px solid rgba(#fff, 0.4);

  .line {
    width: 2rpx;
    height: 24rpx;
    background: #e5e5e7;
  }

  .sicon-back {
    font-size: 32rpx;
    color: #000;
  }

  .sicon-home {
    font-size: 32rpx;
    color: #000;
  }

  .sicon-more {
    font-size: 32rpx;
    color: #000;
  }

  .icon-button {
    width: 67rpx;
    height: 56rpx;

    &-left:hover {
      background: rgba(0, 0, 0, 0.16);
      border-radius: 30rpx 0px 0px 30rpx;
    }

    &-right:hover {
      background: rgba(0, 0, 0, 0.16);
      border-radius: 0px 30rpx 30rpx 0px;
    }
  }
}

.left-box {
  position: relative;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  .circle {
    position: absolute;
    left: 0;
    top: 0;
    width: 60rpx;
    height: 60rpx;
    background: rgba(#fff, 0.6);
    border: 1rpx solid #ebebeb;
    border-radius: 50%;
    box-sizing: border-box;
    z-index: -1;
  }
}

.right {
  position: relative;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  .circle {
    position: absolute;
    left: 0;
    top: 0;
    width: 60rpx;
    height: 60rpx;
    background: rgba(#ffffff, 0.6);
    border: 1rpx solid #ebebeb;
    box-sizing: border-box;
    border-radius: 50%;
    z-index: -1;
  }
}

.detail-tab-card {
  // margin-top: 500rpx;
  height: 3000rpx;

  // width: 50%;
  .tab-item {
    height: 80rpx;
    position: relative;
    z-index: 11;

    .tab-title {
      font-size: 30rpx;
    }

    .cur-tab-title {
      font-weight: $font-weight-bold;
    }

    .tab-line {
      width: 48rpx;
      height: 8rpx;
      border-radius: 6rpx;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 10rpx;
      background-color: #1BBDFD;
      z-index: 12;
    }
  }
}
.header-box {
  display: flex !important; 
  @include flex-center-center;
  flex: 1;
  margin-top: 48rpx;
  .img {
    width: 38rpx;
    height: 38rpx;
    border-radius: 50%;
    margin-right: 8rpx;
    image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .title {
    // width: calc(100% - 200px);
  }
}
.header-top {
  @include flex-center;
}